<template>
	<div class="wrapper" :style="{'padding-top':paddingTop}">
		<div class="home-nav">
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :is-back="false" :is-fixed="false" :border-bottom="false" :background="{ background: '#65db79'}">
				<div class="serch-type">
					<view style="color: #fff;font-size: 40rpx;margin-left: 20rpx;font-weight: bold;">
						浙宝网平台
					</view>
					<div style="color: #fff;margin-left: 20rpx;font-size: 35rpx;font-weight: 400;">{{pageName}}</div>
					<div style="" class="swich-type" @click="show = true">切换类目</div>
				</div>
			</u-navbar>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<u-navbar :is-back="false" :is-fixed="false" :border-bottom="false" :background="{ background: '#65db79'}">
				<div class="serch-type" style="width: 100%;">
					<view style="color: #fff;font-size: 40rpx;margin-left: 20rpx;font-weight: bold;">
						浙宝网平台
					</view>
					<div style="color: #fff;margin-left: auto;font-size: 35rpx;font-weight: 400;">
						{{pageName}}
					</div>
					<div style="margin-right: 20rpx;" class="swich-type" @click="show = true">切换类目</div>
				</div>
			</u-navbar>
			<!-- #endif -->
			<div class="home-serch">
				<div class="serach-input" @click="handleSearch">
					<u-icon name="search" size="29"></u-icon>
					<div style="color: #999;font-size: 27rpx;margin-left: 15rpx;">搜索商品或档口</div>
				</div>
			</div>
		</div>
		<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
		<div v-for="(item, index) in pageData.list" :key="index">
			<carousel v-if="item.type == 'carousel'" :res="item.options" />
			<view class="tab-list" v-if="item.type == 'carousel'">
				<view class="tab-item" @click="goPath('/pages/navigation/search/newGoods')">
					<image src="https://www.zhebao198.com/zbw/neww.png" class="tab-img"></image>
					<view>今日新品</view>
				</view>
				<view class="tab-item" @click="goPath('/pages/navigation/search/searchPage?isShowSeachGoods=1')">
					<image src="https://www.zhebao198.com/zbw/nwea.png" class="tab-img"></image>
					<view>商品库</view>
				</view>
				<view class="tab-item" @click="goPath('/pages/tabbar/store/store?gold=1')">
					<image src="https://www.zhebao198.com/zbw/newc.png" class="tab-img"></image>
					<view>钻石档口</view>
				</view>
				<view class="tab-item" @click="goPath('/pages/tabbar/store/store')">
					<image src="https://www.zhebao198.com/zbw/newb.png" class="tab-img"></image>
					<view>逛市场</view>
				</view>
			</view>
			<titleLayout v-if="item.type == 'title'" :res="item.options" />
			<shop v-if="item.type == 'shop'" :res="item.options" />
			<goodsHot v-if="item.type == 'goodsHot'" :res="item.options" />
			<leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
			<leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
			<topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
			<topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
			<flexThree v-if="item.type == 'flexThree'" :res="item.options" />
			<flexFive v-if="item.type == 'flexFive'" :res="item.options" />
			<flexFour v-if="item.type == 'flexFour'" :res="item.options" />
			<flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
			<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
			<menuLayout v-if="item.type == 'menu'" :res="item.options" />
			<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
			<goods :enableBottomLoad="enableLoad" :paddingTop="paddingTop" v-if="item.type == 'goods'"
				:res="item.options" />
			<group v-if="item.type == 'group'" :res="item.options" />
			<notice v-if="item.type == 'notice'" :res="item.options" />
			<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
			<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
			<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
			<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->

		</div>
		<u-popup v-model="show" mode="center">
			<view style="width: 600rpx;padding: 31rpx;color: #666;">
				<view>
					<view style="margin-top: 31rpx;">女装</view>
					<view style="display: flex;align-items: center;flex-wrap: wrap;margin-left: -31rpx;">
						<view v-for="(item,index) in nvList" :key="index" style="border: 1px solid #d8d8d8;margin-top: 23rpx;width: 238rpx;height: 60rpx;display: flex;
						align-items: center;justify-content: center;border-radius: 5rpx;margin-left: 31rpx;" @click="switchPage(item)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view>
					<view style="margin-top: 31rpx;">男装</view>
					<view style="display: flex;align-items: center;flex-wrap: wrap;margin-left: -31rpx;">
						<view v-for="(item,index) in nanList" :key="index" style="border: 1px solid #d8d8d8;margin-top: 23rpx;width: 238rpx;height: 60rpx;display: flex;
						align-items: center;justify-content: center;border-radius: 5rpx;margin-left: 31rpx;" @click="switchPage(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<fetchCoupon ref='coupon' />
		<u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
	</div>
</template>

<script>
	// 引用组件
	import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
	import tpl_shop from "@/pages/tabbar/home/template/tpl_shop"; //档口
	import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
	import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
	import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
	import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
	import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
	import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
	import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
	import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
	import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
	import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
	import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
	import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
	import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
	import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
	import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
	import goods_hot from "@/pages/tabbar/home/template/goods_hot"; //商品分类以及分类中的商品
	// 结束引用组件
	import {
		getFloorData,
		getAllTemplate
	} from "@/api/home"; //获取楼层装修接口
	import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
	import config from "@/config/config";

	import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
	import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
	import storage from "@/utils/storage.js";
	import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
	// import {receiveCoupons} from "@/api/members"

	export default {
		data() {
			return {
				show: false,
				config,
				storage,
				showCp: true,
				pageData: "", //楼层页面数据
				isIos: "",
				enableLoad: false, //触底加载 针对于商品模块
				serchType: [],
				pageId: "",
				paddingTop: "131px",
				pageName: "",
				nanList: [],
				nvList: [],

			};
		},
		components: {
			carousel: tpl_banner,
			titleLayout: tpl_title,
			leftOneRightTwo: tpl_left_one_right_two,
			leftTwoRightOne: tpl_left_two_right_one,
			topOneBottomTwo: tpl_top_one_bottom_two,
			topTwoBottomOne: tpl_top_two_bottom_one,
			flexThree: tpl_flex_three,
			flexFive: tpl_flex_five,
			flexFour: tpl_flex_four,
			flexTwo: tpl_flex_two,
			textPicture: tpl_text_picture,
			menuLayout: tpl_menu,
			search: tpl_search,
			flexOne: tpl_flex_one,
			goods: tpl_goods,
			group: tpl_group,
			notice: tpl_notice,
			promotions: tpl_promotions,
			fetchCoupon,
			shop: tpl_shop,
			goodsHot: goods_hot,
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			console.log(systemInfo.statusBarHeight);
			this.paddingTop = systemInfo.statusBarHeight + 44 + 35 + 'px'
			console.log(this.paddingTop);
			this.pageId = uni.getStorageSync('pageId') || ''
			this.pageName = uni.getStorageSync('pageName') || ''
			this.getAllpage()
			// this.init();
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true
			});
			// #endif

		},
		methods: {
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			handleSearch() {
				uni.navigateTo({
					url: `/pages/navigation/search/searchPage`,
				});
			},
			switchPage(row) {
				this.pageName = row.name
				this.pageId = row.id
				this.show = false
				uni.setStorageSync("pageId", this.pageId);
				uni.setStorageSync("pageName", this.pageName);
				this.init(this.pageId);
			},
			getAllpage() {
				getAllTemplate({
					clientType: 'H5'
				}).then((res) => {
					console.log(res);
					if (res.data.code === 200 && res.data.result && res.data.result.length) {
						const arr = res.data.result
						const arrb = []
						const arrc = []
						arr[0].list.forEach((nan) => {
							if (nan.category == '女装') {
								arrb.push(nan)
							} else {
								arrc.push(nan)
							}
						})
						console.log(999, arrb);
						this.nanList = arrc
						this.nvList = arrb
						this.serchType = res.data.result;
						console.log(678, this.serchType);
						let isPageId = false
						this.serchType.forEach((item) => {
							item.list.forEach((row) => {
								if (this.pageId && this.pageId === row.id) {
									isPageId = true
								}
							})
						})
						console.log('isPageId', isPageId);
						if (this.pageId && isPageId) {
							this.init(this.pageId);
						} else {
							this.init(this.serchType[0].list[3].id);
							this.pageName = this.serchType[0].list[3].name
							uni.setStorageSync("pageId", this.serchType[0].list[3].id);
							uni.setStorageSync("pageName", this.serchType[0].list[3].name);
						}
					}
				});
			},
			fetchCoupon() {
				this.$refs.coupon.firstGetAuto();
			},
			/**
			 * 实例化首页数据楼层
			 */
			init(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.pageData = "";
				getFloorData({
					clientType: "H5",
					id,
					pageType: "INDEX"
				}).then((res) => {
					if (res.data.success) {
						const result = JSON.parse(res.data.result.pageData)
						this.pageData = result;
						console.log(22, this.pageData);
						if (result.list.length) {
							// 如果最后一个装修模块是商品模块的话 默认启用自动加载
							result.list[result.list.length - 1] ? result.list[result.list.length - 1].model ==
								'goods' ? this.enableLoad = true : '' : ''
						}
						uni.hideLoading()
					}
				});
			},
			// 是否有网络链接
			isConnected(val) {
				val ? this.init() : ''
			},

			/**
			 * TODO 扫码功能后续还会后续增加
			 * 应该实现的功能目前计划有：
			 * 扫描商品跳转商品页面
			 * 扫描活动跳转活动页面
			 * 扫描二维码登录
			 * 扫描其他站信息 弹出提示，返回首页。
			 */
			scanCode() {
				uni.scanCode({
					success: function(res) {
						let path = encodeURIComponent(res.result);



						if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
							console.log(path)
							//app扫码登录
							uni.navigateTo({
								url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
							});
							return;
						}


						// WX_CODE 为小程序码
						if (res.scanType == "WX_CODE") {
							console.log(res);
							uni.navigateTo({
								url: `/${res.path}`,
							});
						} else {
							config.scanAuthNavigation.forEach((src) => {
								if (res.result.indexOf(src) != -1) {
									uni.navigateTo({
										url: `/${res.result.substring(src.length)}`,
									});
								} else {
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/tabbar/home/web-view?src=" +
												path,
										});
									}, 100);
								}
							});
						}
					},
				});
			},

			/**
			 * 提示获取权限
			 */
			tipsGetSettings() {
				uni.showModal({
					title: "提示",
					content: "您已经关闭相机权限,去设置",
					success: function(res) {
						if (res.confirm) {
							if (this.isIos) {
								plus.runtime.openURL("app-settings:");
							} else {
								permission.gotoAppPermissionSetting();
							}
						}
					},
				});
			},

			/**
			 * 唤醒客户端扫码
			 * 没权限去申请权限，有权限获取扫码功能
			 */
			async scan() {
				// #ifdef APP-PLUS
				this.isIos = plus.os.name == "iOS";
				// 判断是否是Ios
				if (this.isIos) {
					const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
					if (iosFirstCamera !== "false") {
						uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
						this.scanCode();
					} else {
						if (permission.judgeIosPermission("camera")) {
							this.scanCode();
						} else {
							// 没有权限提醒是否去申请权限
							this.tipsGetSettings();
						}
					}
				} else {
					/**
					 * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
					 * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
					 */
					this.scanCode();
				}

				// #endif

				// #ifdef MP-WEIXIN
				this.scanCode();
				// #endif
			},
		},
	};
</script>

<style scoped lang="scss">
	.home-nav {
		position: fixed;
		background-color: #65db79;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 99;
	}

	.tab-list {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		margin-top: 31rpx;
		margin-bottom: 21rpx;
	}

	.tab-img {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.home-serch {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 5px;
	}

	.serach-input {
		width: 710rpx;
		height: 30px;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding-left: 31rpx;
	}

	.serch-type {
		display: flex;
		align-items: center;
	}

	.swich-type {
		margin-left: 15rpx;
		padding: 5rpx 10rpx;
		border: 1px solid #fff;
		color: #fff;
		font-size: 23rpx;
		border-radius: 20rpx;
	}
</style>